/*
Author:kermit
Email:455196886@qq.com
Company:http://dragontrail.com/
Creattime:2017-06-02
*/

// 依赖vue,vue-resource,vue-lazyload
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'imgs/error.jpg',
  loading: 'imgs/loading.gif',
  attempt: 1,
  // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
  listenEvents: [ 'scroll' ]
})

var photosGallery = new Vue({
  	el: '#app',
  	data: {
      showGoTop:false,
      resourceLoaded:false,
      dataLoaded:false,
  		initLoaded:false,
  		countDown:5,
  		startPage:true,
  		isCol2:false,
  		isReverse:false,
  		topBarFixed:false,
  		galleryTop:0,
  		filterTimeActive:true,
  		filterTagActive:false,
      tagActive:0,
  		coverOpen:false,
  		coverImgUrl:'',
  		total:1592,
  		filteAll:true,
  		loadingMore:false,
  		isAjax:false,
  		galleries:[],
	    photos:[],
  	},
  	created: function () {
      this.resourceLoader();
  		this.fetchData();
  	},
  	methods:{
      //加载金泰资源
      resourceLoader:function(){
        var _this = this;
        var Loader = new resLoader({
          baseUrl:"./imgs/",
          resources : [
            'banner.jpg',
            'camera.png',
            'close-btn.png',
            'error.jpg',
            'gotoTop.png',
            'icon_down_blue.jpg',
            'icon_down_gray.jpg',
            'icon_filter_blue.jpg',
            'icon_filter_gray.jpg',
            'icon_right.jpg',
            'icon_up_blue.jpg',
            'icon_up_gray.jpg',
            'loading.gif',
            'logo.png',
            'photos_1.jpg',
            'photos_2.jpg',
            'photos_3.jpg',
            'photos_4.jpg',
            'photos_5.jpg',
            'photos_6.jpg',
            'photos_7.jpg',
            'photos_8.jpg',
            'photos_9.jpg',
            'photos_10.jpg',
            'startPageBg.jpg',
            'startTitlte.png'
          ],
          onStart : function(total){},
          onProgress : function(current, total){},
          onComplete : function(total){
            _this.resourceLoaded = true;
            if(_this.resourceLoaded && _this.dataLoaded){
              _this.initLoaded = true;
              _this.autoCountDown();
            }
          }
        })
        Loader.start();
      },
  		//请求数据
  		fetchData:function(){
  			this.$http.get('https://app.goncl.cn/api/get_album.json',emulateJSON=true)
          .then(response => {
          	console.log('response',response)
            this.dataLoaded = true;
            var galleries = response.body.galleries;
            for(i in galleries){
              var row = galleries[i];
              var item = {
                id:row.id,
                name:row.name,
                active:false,
              }
              this.galleries.push(item);
            }
            this.updatePhotos(true,response.body.images);
            if(this.resourceLoaded && this.dataLoaded){
              this.initLoaded = true;
              this.autoCountDown();
            }
    			}, error => {
            console.log('err',error);
    			});
  		},
  		hideStartPage:function(){
  			if(this.timer){clearInterval(this.timer);}
  			this.startPage = false;
  		},
  		//自动倒计时
	    autoCountDown:function(){
	    	var _this = this;
	  		_this.timer = setInterval(function(){
	  			if(_this.countDown>0){
	  				_this.countDown--;
	  			}else{
	  				_this.hideStartPage();
	  			}
	  		},1000);
	    },
	   	//切换排列方式
  		swtichCol:function(){
  			this.isCol2 = !this.isCol2;
  		},
  		//切换时间顺序
  		photosort:function(){
  			this.filterTimeActive = true;
  			this.filterTagActive = false;
  			this.isReverse = !this.isReverse;
  			this.photos.reverse();
  		},
  		//筛选的点击
  		filter:function(){
  			this.filterTimeActive = false;
  			this.filterTagActive = !this.filterTagActive;
  		},
      //更新图片数据
      updatePhotos:function(init,phonesData){
        var photos = [];
        for(i in phonesData){
          var row = phonesData[i],
              rowShow = false,
              gallery_ids = row.gallery_ids;
          for(j in gallery_ids){
            rowShow = this.tagActive==gallery_ids[j]?true:false;
          }
          var item = {
            id:row.id,
            gallery_ids:row.gallery_ids,
            // image_url:"'"+row.image_url+"'",
            // thumb_url:"'"+row.thumb_url+"'",
            image_url:row.image_url,
            thumb_url:row.thumb_url,
            show:init?true:rowShow,
          }
          photos.push(item);
        }
        this.photos = photos;
      },
  		//图片标签的点击
  		tagFilter:function(key,id){
  			this.filteAll = false;
  			this.filterTagActive = !this.filterTagActive;
  			for(i in this.galleries){
          var row = this.galleries[i]
  				row.active = false;
  				if(i==key){
  					row.active = true;
            this.tagActive = row.id;
  				}
  			}
        this.updatePhotos(false,this.photos);
  		},
  		//筛选全部
  		tagFilteraAll:function(){
  			this.filterTagActive = !this.filterTagActive;
  			for(i in this.galleries){
  				this.galleries[i].active = false;
          this.tagActive = 0;
  			}
  			this.filteAll = true;
        this.updatePhotos(true,this.photos);
  		},
  		openCover:function(key){
        this.coverOpen = !this.coverOpen;
        this.coverImgUrl = this.photos[key].image_url;
  		},
  		closeCover:function(){
  			this.coverOpen = !this.coverOpen;
  		},
  		albumScroll:function(e){
  			var scrollTop = $("#album").scrollTop();
  			var bannerHeight = $(".banner").outerHeight(),
  				topBarHeight = $(".topBar").outerHeight(),
  				galleryHeight = $(".photos-gallery").outerHeight(),
  				screenHeight = $(window).height(),
  				topBarTop = bannerHeight + topBarHeight,
  				albumHeight = topBarTop + galleryHeight;
  				albumHeightDiff = albumHeight - screenHeight -10;
  			if(scrollTop>topBarTop){
  				this.topBarFixed = true;
  				this.galleryTop = topBarHeight;
          this.showGoTop = true;
  			}else{
  				this.topBarFixed = false;
  				this.galleryTop = 0;
          this.showGoTop = false;
  			}
  			if(scrollTop > albumHeightDiff){
          // 滚动加载更多
  				// this.loadingMore = true;
  				// if(this.loadingMore && !this.isAjax){
  				// 	this.isAjax = true;
  				// 	var _this = this;
	  			// 	setTimeout(function(){
	  			// 		_this.loadingMore = false;
	  			// 		_this.isAjax = false;
	  			// 	},2000)
  				// }
  			}
  		},
      goTop:function(){
        $("#album").animate({'scrollTop':0},500);
      }
  	}
})











